{% load i18n %}
<style>
    .top-bar {
        font-size: 16px!important;
        //    color: blue; //blue;
    }
    #top_bar_phone {
        font-size: 12px!important;
        .row-margin {
            margin-top: 0px;
            // margin-bottom: -20px;
        }
        .lang {
            padding: 8px 0px!important;
        }
        .lang input {
            height:"12px"!important;
            height:"12px"!important;
        }
        .lang button {
            color: white!important;
        }
</style>

<script src="/static/lib/csrf.js"></script>
<script>
        function set_lang(code){
            var str = $("#form_lang").serialize()
            str += '&language='+code
            $.post("{%url 'set_language'%}",
            str,
            function(data){
                window.location.reload()
            });
        }
</script>

<div id="top_bar" class="clearfix nav-justified " style="font-size:16px">
    <nav class="nav row-margin navbar-inverse bg-inverse " role="navigation">
        <div class="col-md-12 col-xs-12 f-pz">
            <div class="container">
                <ul class="nav navbar-left">
                    <a href="{%url 'index'%}">
                        <img src="/static/images/logo.png" width="150px" height="50px" sytle="margin:0 0 0 500px!important;"/>
                    </a>
                </ul>
                <ul class="nav navbar-nav navbar-left">
                    <li id="nav-home">
                        <a href="{%url 'index'%}"><i class="fa fa-home red"></i>{%trans '首页'%}</a>
                    </li>
                    <li id="nav-trade">
                        <a href="{%url 'trade'%}"><i class="fa fa-exchange red"></i> {% trans '交易中心' %}</a>
                    </li>
                    <li id="nav-c2c">
                        <a href="{%url 'c2c'%}"><i class="fa fa-cny red"></i> {% trans '点对点交易' %}</a>
                    </li>
                    <li id="nav-no" style="display:auto">
                        <!--
                        <a href="#"><b class="red">{% trans '香港平台,在测试中，请勿往充值地址充值电子货币' %}</b></a>
                        -->
                        <!--
                        <a href="#"><b class="red">{% trans '來自香港，秒衝秒提，COC代充幣' %}</b></a>
                        <a href="#"><b class="red">{% trans '香港平台，口碑經營，零手續費，秒衝秒提' %}</b></a>
                        -->
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <!-- 用户-
                    <li>
                    {% if user.is_authenticated %}
                    <a >你好!{{user.phone}}</a>
                    {% else %}
                    <a href="#"></a>
                    {% endif %}
                    </li>
                    -->
                    <!-- 退出/登录-->
                    <li id="nav-balances">
                        <a href="{%url 'userinfo_balances' %}"><i class="fa fa-money blue"></i>{% trans '资金中心' %}
                        </a>
                    </li>
                    <li id="nav-userinfo">
                        <a href="{%url 'userinfo' %}"><i class="fa fa-user blue"></i>{% trans '用户中心' %} </a>
                    </li>
                    <li>
                        {% if user.is_authenticated %}
                        <a href="/users/logout/?next={%url 'trade'%}"><i class="fa fa-sign-out blue" aria-hidden="true"></i>{% trans '注销' %} </a>
                        {% else %}
                        <a href="/users/login?next=/{%url 'trade'%}"> <i class="fa fa-sign-in blue" aria-hidden="true"></i> {% trans '登录/注册' %}</a>
                        {% endif %}
                    </li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-language blue"></i>
                        {% get_current_language as LANGUAGE_CODE %}
                        {% get_current_language as LANGUAGE_CODE %}
                        {% get_available_languages as LANGUAGES %}
                        {% get_language_info_list for LANGUAGES as languages %}
                        {% for language in languages %}
                        {% if language.code == LANGUAGE_CODE %}
                        {{language.name_local}}
                        {% endif %}
                        {% endfor %}
                        <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;" onclick="set_lang('zh-hans')"><img src="/static/images/lang/Flag_of_the_People's_Republic_of_China.svg"/> 简体中文</a></li>
                            <li><a href="javascript:;" onclick="set_lang('zh-hant')"><img src="/static/images/lang/Flag_of_Hong_Kong.svg"/> 繁体中文</a></li>
                            <li><a href="javascript:;" onclick="set_lang('en')"><img src="/static/images/lang/Flag_of_the_United_States.svg"/>English</a></li>
                            <li><a href="javascript:;" onclick="set_lang('ja')"><img src="/static/images/lang/Flag_of_Japan.svg"/>日本語</a></li>
                            <form id="form_lang" action="{% url 'set_language' %}" method="post">{% csrf_token %}
                                <input class="btn " name="next" type="hidden" value="{{ request.path }}"/>
                            </form>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<div id="top_bar_phone" class="clearfix nav-justified f-pz ">
    <nav class="nav row-margin navbar-inverse bg-inverse f-pz " role="navigation">
        <div class="col-xs-12 f-pz">
            <div class="container ">
                <ul class="nav navbar-left">
                    <li>
                        <a href="{%url 'index'%}" class="col-xs-12 f-pz f-center">
                            <img src="/static/images/logo.png" width="150px" height="50px" sytle="margin:0 0 0 500px!important;"/>
                        </a>
                    </li>
                    <li id="nav-no" class="red col-xs-8">
                        <!--
                        <a href="#"><b class="red">{% trans '香港平台，口碑經營，零手續費，秒衝秒提' %}</b></a>
                        -->
                    </li>
                    <li id="nav-xx" class="col-xs-4 f-pz f-fr">
                        <a class="dropdown-toggle blue f-fr" data-toggle="dropdown" href="#">
                            {% get_current_language as LANGUAGE_CODE %}
                            {% get_current_language as LANGUAGE_CODE %}
                            {% get_available_languages as LANGUAGES %}
                            {% get_language_info_list for LANGUAGES as languages %}
                            {% for language in languages %}
                            {% if language.code == LANGUAGE_CODE %}
                            {{language.name_local}}
                            {% endif %}
                            {% endfor %}
                            <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;" onclick="set_lang('zh-hans')"><img src="/static/images/lang/Flag_of_the_People's_Republic_of_China.svg"/> 简体中文</a></li>
                            <li><a href="javascript:;" onclick="set_lang('zh-hant')"><img src="/static/images/lang/Flag_of_Hong_Kong.svg"/> 繁体中文</a></li>
                            <li><a href="javascript:;" onclick="set_lang('en')"><img src="/static/images/lang/Flag_of_the_United_States.svg"/>English</a></li>
                            <li><a href="javascript:;" onclick="set_lang('ja')"><img src="/static/images/lang/Flag_of_Japan.svg"/>日本語</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-left col-xs-12 f-pz ">
                    <!--
                    <li id="nav-new" class="col-xs-3 f-pz" >
                    <a href="{%url 'index'%}"><i class="fa fa-home red"></i> {%trans '首页'%}</a>
                    </li>
                    -->
                    <li id="nav-trade" class="col-xs-3 f-pz">
                        <a href="{%url 'trade'%}"><i class="fa fa-exchange red"></i> {% trans '交易' %}</a>
                    <li id="nav-balances" class="col-xs-3 f-pz">
                        <a href="{%url 'userinfo_balances' %}"><i class="fa fa-usd blue"></i>{% trans '资金' %}
                        </a>
                    <li id="nav-userinfo" class="col-xs-3 f-pz">
                        <a href="{%url 'userinfo' %}"><i class="fa fa-user blue"></i>{% trans '用户' %}
                        </a>
                    </li>
                    <li class="col-xs-3 f-pz">
                        {% if user.is_authenticated %}
                        <a href="/users/logout/?next={%url 'trade'%}"><i class="fa fa-sign-out blue" aria-hidden="true"></i>{% trans '注销' %} </a>
                        {% else %}
                        <a href="/users/login?next=/{%url 'trade'%}"><i class="fa fa-sign-in blue" aria-hidden="true"></i> {% trans '登录' %}</a>
                        {% endif %}
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
